<template>
	<view>
		<view class="tab">
			<scroll-view class="tabScroll" scroll-x="true" show-scrollbar="false" >
				<view class="tab-box">
					<view :style="{'margin-right': span}" 
					class="tab-item" v-for="(item,index) in list" @click="onTabClick(index,item)">
						<view :style="current == index?activeStyle:itemStyle">{{item}}</view>
					</view>
				</view>
			</scroll-view>
			<view class="tab_setting">
				<uni-icons :type="rightIcon" ></uni-icons>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"tabBanner",
		props:{
			list:{ type:Array, default:()=>[] },
			current:{ type:Number, default:0 },
			activesize:{ type:String, default:"40rpx" },
			fontsize:{ type:String, default:"30rpx" },
			activeColor:{ type:String, default:"#d00" },
			textColor:{ type:String, default:"#000" },
			span:{ type:String, default:"3px" },
			rightIcon:{ type:String, default:"bars" },
		},
		data() { return {}; },
		methods:{
			onTabClick(index,item){
				console.log("打开" +item+"新闻");
				this.$emit("onTabClick", index); // 只发射事件，不修改props
			},
		},
		computed:{
			activeStyle(){
				return{ color: this.activeColor, fontSize: this.activesize, fontWeight: 'bold' }
			},
			itemStyle(){
				return{ color: this.textColor, fontSize: this.fontsize, fontWeight: 'normal' }
			}
		}
	}
</script>

<style>
	.tab { display: flex; background-color: #fff; width: 100%; box-sizing: border-box; border-bottom: 1px gainsboro solid; padding-left: 10px; }
	.tabScroll{ flex:1; overflow: hidden; box-sizing: border-box; }
	.tab-box{ display: flex; height: 80rpx; align-items: center; flex-wrap: nowrap; box-sizing: border-box; }
	.tab-item{ flex-shrink: 0; }
	.tab_setting{ position: relative; display: flex; justify-content: center; align-items: center; width: 45px; }
	scroll-view ::-webkit-scrollbar{ display: none; width: 0 !important; height: 0 !important; -webkit-appearance: none; background: transparent; }
	scroll-view::-webkit-scrollbar { display: none; width: 0; height: 0; color: transparent; }
</style>